<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script  src="../../../jquery-3.6.0.min.js"></script>
    <script>
        hideFn = function () {
            $("#showDiv").hide("normal","swing",function () {
                alert("显示出来了哦")
            })
        }

        showFn = function () {
	        $("#showDiv").show("normal","swing",function () {
		        alert("显示出来了哦")
	        })
        }

        toggleFn = function () {
	        $("#showDiv").toggle("normal","swing",function () {
		        alert("切换成功了哦")
	        })
        }
    </script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
    div显示和隐藏
</div>
</body>
</html>
